<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/ajax.js"></script>
    <style>
        #createCode {
            user-select: none;
        }

        .right {
            font-size: 12px;
            color: green;
        }

        .err {
            font-size: 12px;
            color: red;
        }
    </style>
</head>

<body>
    <form class="box" onsubmit="return false" autocomplete="on">
        <p>
            <label for="">用户名:</label>
            <input type="text" id="user">
            <span id="user_span"></span>
        </p>
    </form>
</body>

<script>
    // 1. JS操作元素之前必须先获取元素
    var userInp = document.getElementById("user");
    var userSpan = document.getElementById("user_span");

    // 一步到位
    userInp.onblur = function () {
        isUserOk = false;
        var user = userInp.value.trim();
        userInp.value = user;

        var userReg = /^[a-zA-Z_$][\w$]{5,11}$/;

        if (userReg.test(user)) {
            // $.ajax({
            //     // type:"get",
            //     url: "../php/isExistUser.php",
            //     data: { user },
            //     // async:true,
            //     dataType: "json",
            //     success: function (data) {
            //         var { status, msg } = data;
            //         if (status) {
            //             userSpan.textContent = "√";
            //             userSpan.className = "right";
            //             isUserOk = true;
            //         } else {
            //             userSpan.textContent = "* 用户名已存在!";
            //             userSpan.className = "err";
            //         }
            //     }
            // })

            debugger;
            var p = new Promise(function (resolve, reject) {
                debugger;
                $.ajax({
                    // type:"get",
                    url: "../php/isExistUser.php",
                    data: { user },
                    // async:true,
                    dataType: "json",
                    success: function (data) {
                        debugger;
                        var { status, msg } = data;
                        if (status) {
                            resolve(msg);
                        } else {
                            reject(msg);
                        }
                    }
                })

            });
            console.log(p); // pending
            p.then(function (msg) {
                debugger;
                userSpan.textContent = "√";
                userSpan.className = "right";
                isUserOk = true;
            }, function (msg) {
                debugger;
                userSpan.textContent = "* 用户名已存在!";
                userSpan.className = "err";
            })

        } else {
            userSpan.textContent = "* 用户名由数字,大小写字母,下划线,$组成,6-12位,且不能以数字开头";
            userSpan.className = "err";
        }
    }







</script>


</html>